<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        h4,
        h5,
        h6 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
            margin-top: 0;
        }

        /* 通栏 */
        #top {
            height: 50px;
            box-shadow: 0 0 2px #888888;
        }

        /* 留言标题 */
        #title {
            width: 600px;
            height: 70px;
            background-color: white;
            margin: 0 auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;
        }

        .title_input {
            margin-top: 15px;
            width: 590px;
            height: 20px;
            border: 2px solid transparent;
            border-bottom: 1px solid black;
        }

        /* 留言内容 */
        #content {
            width: 600px;
            height: 160px;
            background-color: white;
            margin: 20px auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;

        }

        .content_textarea {
            margin-top: 15px;
            width: 590px;
            height: 110px;
            border: 2px solid transparent;
            border-bottom: 1px solid #000;
        }

        /* 提交按钮 */
        #sub_button {
            width: 160px;
            height: 20px;
            margin: 20px auto;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
        }

        /* 留言显示 */
        .show_msg {
            width: 620px;
            height: 80px;
            margin: 10px auto 0;
            background-color: #fff;
        }

        ul {
            list-style: none;
            padding: 0;
            font-size: 12px;
        }

        .title {
            color: #000;
            padding: 10px 5px 5px 5px;
        }

        .content {
            color: #939393;
            padding: 0 8px;
        }

        .date {
            text-align: right;
            margin-right: 5px;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp, ref, onMounted} = Vue //解构
        window.onload = function () {
            createApp({
                setup() {
                    /**
                     * fetch配置
                     */
                    const headers = new Headers();
                    headers.append('Content-Type', 'application/json');

                    /**
                     * 显示数据
                     */
                    const pageNum = ref(1)
                    const messages = ref()//声明一个message变量，并且绑定到html页面
                    const getData = function () {
                        //获得留言列表
                        fetch('http://localhost:8082/msgList', {
                            method: 'POST',
                            headers: headers,
                            body: JSON.stringify({pageSize: '5', pageNum: pageNum.value})
                        }).then(response => response.json()).then(data => {
                            console.log(data)
                            if (data.code === 200){
                                messages.value = data.data.list
                                maxPage = data.data.pages
                            }
                        })
                    }

                    /**
                     * 加载数据
                     */
                    //声明周期钩子/钩子函数
                    onMounted(() => {
                        getData()
                    })


                    /**
                     * 提交按钮操作
                     */
                    const title = ref('')
                    const content = ref('')
                    //const msg = ref({title:'',content:''})
                    const submit = function () {
                        fetch('http://localhost:8082/msgInsert', {
                            method: 'POST',
                            headers: headers,
                            body: JSON.stringify({title: title.value, content: content.value})
                        }).then(response => response.json()).then(data => {
                            getData() //刷新记录
                            title.value = ''
                            content.value = ''
                        })
                    }

                    /**
                     * 分页操作
                     */
                    const prePage = function () {
                        if(pageNum.value > 1){
                            pageNum.value--
                            getData()
                        }
                    }

                    let maxPage = 0;
                    const nextPage = function () {
                        if(pageNum.value < maxPage){
                            pageNum.value++
                            getData()
                        }
                    }

                    /**
                     * 双向绑定
                     */
                    const topColor = ref("#4ba6ee")

                    return {
                        messages, topColor, submit, title, content, prePage, nextPage
                    }

                }
            }).mount('#app')
        }
    </script>
</head>

<body>
<div id="app">
    <!-- 通栏 -->
    <div id="top" :style="'background-color:' + topColor"></div>
    <!-- 留言标题 -->
    <div id="title"><input type="color" v-model="topColor" style="float: right;">
        <h4>留言标题</h4>
        <input v-model="title" class="title_input" type="text" placeholder="给我们来点建议吧"/>
    </div>
    <!-- 留言内容 -->
    <div id="content">
        <h4>留言内容</h4>
        <textarea class="content_textarea" v-model="content"></textarea>
    </div>
    <div id="page" style="float: right; font-size: 12px; margin-right: 400px;">
        <span style="margin-right: 10px;" @click="prePage()">上一页</span><span @click="nextPage()">下一页</span></div>
    <!-- 提交按钮 -->
    <div id="sub_button" :style="'background-color:' + topColor" v-on:click="submit()">提交</div>


    <!-- 显示留言 -->
    <div v-for="message in messages" :key="message.id" class="show_msg">
        <ul>
            <li style="margin:10px 10px 0 0; float: right;">#{{message.id}}</li>
            <li class="title">{{message.title}}</li>
            <li class="content">{{message.content}}</li>
            <li class="date">{{message.createTime}}</li>
        </ul>
    </div>
</div>
</body>

</html>
